<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-select style="width: 110px;" v-model="reqData.userType" placeholder="身份">
        <el-option v-for="item in userTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select style="width: 160px;" v-model="reqData.isBuyEnsureAdmission" placeholder="是否购买保录计划">
        <el-option v-for="item in isBuyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select style="width: 160px;" v-model="reqData.isBuySingleAction" placeholder="是否购买单招模式">
        <el-option v-for="item in isBuyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select style="width: 170px;" v-model="reqData.isBuyOneToOne" placeholder="是否购买专家一对一">
        <el-option v-for="item in isBuyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-input style="width: 150px;" placeholder="姓名" v-model="reqData.name"></el-input>
      <el-input style="width: 150px;" placeholder="手机号" v-model="reqData.phone"></el-input>
      <el-button type="primary" icon="el-icon-search" @click.native.prevent="handleSearch">
        搜索
      </el-button>
    </div>
    <el-table border stripe highlight-current-row style="width: 100%;" :data="listData" :empty-text="emptyText">
      <el-table-column label="ID" prop="userId"></el-table-column>
      <el-table-column label="身份" prop="userTypeShow"></el-table-column>
      <el-table-column label="微信昵称" prop="userNickName"></el-table-column>
      <el-table-column label="微信头像">
        <template slot-scope="scope">
          <el-avatar size="large" :src="scope.row.userAvatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="userName"></el-table-column>
      <el-table-column label="手机号" width="120" prop="userPhone"></el-table-column>
      <el-table-column label="身份证号" width="170" prop="userIdcard"></el-table-column>
      <el-table-column label="是否购买保录计划" prop="userIsBuyEnsureAdmissionShow"></el-table-column>
      <el-table-column label="是否购买单招模式" prop="userIsBuySingleActionShow"></el-table-column>
      <el-table-column label="是否购招办专家一对一" prop="userIsBuyOneToOneShow"></el-table-column>
      <el-table-column label="文理科" prop="userSubjectShow"></el-table-column>
      <el-table-column label="是否艺考生" prop="userIsArt"></el-table-column>
      <el-table-column label="高考成绩" prop="userTestScore"></el-table-column>
      <el-table-column label="最近一次考试成绩" prop="userSimulateScore"></el-table-column>
      <el-table-column label="可提现余额" prop="userBalance"></el-table-column>
      <el-table-column label="注册渠道" prop="userChannelShow"></el-table-column>
      <el-table-column label="创建时间" width="140" prop="userCreated"></el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background :pager-count="pagerCount" :page-size="reqData.perPage" :current-page="reqData.curPage"
        layout="prev, pager, next" @current-change="pageChange" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    getList
  } from '@/api/user'
  import {
    errorMsg,
    successMsg
  } from '@/utils/my'

  export default {
    inject: ['reload'],
    data() {
      return {
        reqData: {
          isBuyEnsureAdmission: '',
          isBuySingleAction: '',
          isBuyOneToOne: '',
          userType: '',
          name: '',
          phone: '',
          curPage: 1,
          perPage: 20
        },
        pagerCount: 13,
        total: 0,
        listData: [],
        loading: true,
        emptyText: '暂无任何数据',
        userTypeList: [{
            id: 0,
            name: '全部'
          },
          {
            id: 1,
            name: '学生'
          },
          {
            id: 2,
            name: '招办老师'
          },
          {
            id: 3,
            name: '招办专家'
          },
          {
            id: 4,
            name: '辅导员'
          }
        ],
        isArtList: [{
            id: -1,
            name: '全部'
          },
          {
            id: 0,
            name: '非艺术生'
          },
          {
            id: 1,
            name: '艺术生'
          }
        ],
        isBuyList: [{
            id: -1,
            name: '全部'
          },
          {
            id: 0,
            name: '未购买'
          },
          {
            id: 1,
            name: '已购买'
          }
        ]
      }
    },

    created() {
      this.fetchData()
    },

    methods: {

      handleSearch() {
        this.reqData.curPage = 1
        this.fetchData()
      },

      pageChange(p) {
        this.reqData.curPage = p
        this.fetchData()
      },

      fetchData() {
        const that = this
        let tempData = JSON.parse(JSON.stringify(that.reqData))
        tempData.isBuyEnsureAdmission = tempData.isBuyEnsureAdmission.length <= 0 ? -1 : parseInt(tempData.isBuyEnsureAdmission)
        tempData.isBuySingleAction = tempData.isBuySingleAction.length <= 0 ? -1 : parseInt(tempData.isBuySingleAction)
        tempData.isBuyOneToOne = tempData.isBuyOneToOne.length <= 0 ? -1 : parseInt(tempData.isBuyOneToOne)
        tempData.userType = tempData.userType.length <= 0 ? 0 : parseInt(tempData.userType)
        that.loading = true
        getList(tempData).then(res => {
          that.loading = false
          that.total = res.data.total
          that.listData = res.data.list
        })
      }

    }
  }
</script>

<style>
  .filter-container {
    margin-bottom: 10px;
  }

  .pager {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
